<template>
  <div class="table-container">
    <vxe-toolbar>
      <template #buttons>
        <Expend v-if="props.globalTab.render" :render="props.globalTab.render"></Expend>
      </template>
      <template #tools>
        <div class="tool-box">
          <Expend v-if="props.globalOperate.render" :render="props.globalOperate.render"></Expend>
          <vxe-toolbar v-if="props.showExport" ref="exportRef" export></vxe-toolbar>
          <vxe-toolbar v-if="props.showImport" ref="importRef" import></vxe-toolbar>
          <vxe-toolbar v-if="props.showPrint" ref="printRef" print></vxe-toolbar>
          <vxe-toolbar v-if="props.showTool" custom ref="toolbarRef" />
        </div>
      </template>
    </vxe-toolbar>
    <div class="mytable-scrollbar" >
      <VxeTable 
        height="100%"
        ref="tableRef" 
        empty-text="暂无数据！" 
        :data="data" show-header-overflow
        highlight-hover-row 
        @cell-dblclick="cellDblclick"
        :custom-config="{}" 
        :column-config="{ resizable: true }" 
        :print-config="{}" 
        :import-config="{}"
        :export-config="{}"
        :tree-config="treeConfig"
        :row-config="rowConfig"
        :row-style="rowStyle"
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
        >
        <VxeColumn 
          v-for="(item) in props.columns" 
          :minWidth="item.minWidth"
          :key="item.field" 
          :align="item.align" 
          :title="item.title" 
          :field="item.field" 
          :type="item.type"
          :tree-node="item.treeNode"
          :show-overflow="item.showOverflow && item.showOverflow.length > 0 ? item.showOverflow : 'ellipsis'">
          <template #default="scope">
            <Expend v-if="item.render" :render="item.render" :row="scope.row" :column="item"></Expend>
            <span v-else>
                {{ scope.row[item.field] }}
            </span>
          </template>  
        </VxeColumn>
        <transition 
            name="cube" mode="out-in"
          >
        <VxeColumn title="操作" fixed="right" :width="props.rowOperateProperty.width" v-if="props.rowOperateProperty.show">
          <template #default="scope">
            <Expend v-if="props.rowOperate.render" :render="props.rowOperate.render" :row="scope.row"></Expend>
          </template>
        </VxeColumn>
        </transition>
      </VxeTable>
    </div>
    <VxePager v-if="showPage" v-model:currentPage="pageVO.page" v-model:pageSize="pageVO.pageSize" :total="pageVO.total"
      @page-change="pageChange">
    </VxePager>
  </div>
</template>
<script setup lang="tsx">
import { ref, onMounted, defineEmits, defineProps, defineOptions, watch, h } from 'vue'
defineOptions({
  name: "Table",
});

const emit = defineEmits(['pageChange','cellDblclick'])
const Expend = {
  props: {
    row: Object,
    render: Function,
    column: {
      type: Object,
      default: null,
    },
  },
  setup(props) {
    // 渲染函数
    return () => props.render(h, props);
  },
};
const props = defineProps({
  data: {
    default: [],
    type: Array
  },
  columns: {
    default: () => [],
    type: Array as () => Array<{ field: string; align?: any; title?: string; minWidth?: string; treeNode?: boolean; showOverflow?: any; render?: Function }>
  },
  emptyText: {
    default: "没有更多数据了！",
    type: String
  },
  page: {
    default: () => {
      return {
        pageSize: 10,
        page: 1,
        total: 0,
        pageSizes: ["共10", "20", "50", "100"]
      }
    },
    type: Object
  },
  showUpload:{
    default: false,
    type: Boolean
  },
  showTool:{
    default: true,
    type: Boolean
  },
  showPage:{
    default: true,
    type: Boolean
  },
  rowOperateProperty:{
    default: ()=>{
      return {
        width: '350',
        show: false
      }
    },
    type: Object
  },
  showRowOperate: {
    default: true,
    type: Boolean
  },
  rowOperate:{
    default:{},
    type:Object
  },
  globalOperate:{
    default:{},
    type:Object
  },
  globalTab:{
    default:{},
    type:Object
  },
  selectAllChangeEvent: Function,
  selectChangeEvent: Function,
  showPrint:{
    default:false,
    type:Boolean
  },
  showImport:{
    default:false,
    type:Boolean
  },
  showExport:{
    default:false,
    type:Boolean
  },
  treeConfig:{
    default:()=>({}),
    type:Object
  },
  rowConfig:{
    default:()=>({
      isHover: true
    }),
    type:Object
  },
  rowStyle: {
    default: () => { },
    type: Object
  }
})

const pageVO = ref({
  pageSize: 10,
  page: 1,
  total: 0,
  pageSizes: [10, 20, 50, 100]
})

const tableRef = ref()
const toolbarRef = ref()
const printRef = ref()
const importRef = ref()
const exportRef = ref()

onMounted(() => {
  pageVO.value = {
    pageSize: props.page.pageSize,
    page: props.page.page,
    total: props.page.total,
    pageSizes: props.page.pageSizes?props.page.pageSizes:[10, 20, 50, 100]
  }
  if (props.showTool) {
    const $table = tableRef.value
    const $toolbar = toolbarRef.value
    if ($table && $toolbar) {
      $table.connect($toolbar)
    }
  }
  if (props.showPrint){
    const $table = tableRef.value
    const $print = printRef.value
    if ($table && $print) {
      $table.connect($print)
    }
  }
  if (props.showImport){
    const $table = tableRef.value
    const $import = importRef.value
    if ($table && $import) {
      $table.connect($import)
    }
  }
  if (props.showExport){
    const $table = tableRef.value
    const $export = exportRef.value
    if ($table && $export) {
      $table.connect($export)
    }
  }
})

watch(() => props.page, (newVal) => {
  pageVO.value.page = newVal.page
  pageVO.value.pageSize = newVal.pageSize
  pageVO.value.total = newVal.total
})

const pageChange = ({pageSize,currentPage}) => {
  pageVO.value.page = currentPage
  pageVO.value.pageSize = pageSize
  emit('pageChange', pageVO.value)
}


const cellDblclick = (val: { row: any; }) => {
  emit('cellDblclick', val.row)
}

const clearSeleted = async() => {
  await tableRef.value.clearCheckboxRow()
}

defineExpose({
  clearSeleted
})

</script>
<style lang="scss" scoped>
.table-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.operate-box{
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.icon-column {
  display: flex;
  align-items: center;
  ::v-deep .el-icon {
    margin-right: 8px;
  }
}
::v-deep(.vxe-toolbar) {
  padding: 5px;
}
.mytable-scrollbar {
  flex:1;
  overflow-y:auto;
  overflow-x: hidden;
}
.tool-box{
  display: flex;
}

.cube-enter-active,
.cube-leave-active {
	transition: all .7s;
}

.cube-enter-from,
.cube-leave-to {
	transform: translateY(0px) rotateX(40deg);
	opacity: 0;
}

.cube-enter-to,
.cube-leave-from {
	transform: translateY(0) rotateX(0deg);
	opacity: 1;
}
</style>